import React, { Component } from 'react'
import "./Index.less"
import { Switch, Route, NavLink ,Redirect} from "react-router-dom"
import Home from "../Home/Home"
import Cate from "../Cate/Cate"
import Shop from "../Shop/Shop"
import Mine from "../Mine/Mine"
import a1 from "../../assets/img/a1.png"
import a2 from "../../assets/img/a2.png"
import b1 from "../../assets/img/b1.png"
import b2 from "../../assets/img/b2.png"
import c1 from "../../assets/img/c1.png"
import c2 from "../../assets/img/c2.png"
import d1 from "../../assets/img/d1.png"
import d2 from "../../assets/img/d2.png"
export default class Indedx extends Component {
    render() {
        let { location: { pathname } } = this.props
        return (
            <div>
                {/* 二级路由出口 */}
                <Switch>
                    <Route path="/index/home" component={Home}></Route>
                    <Route path="/index/cate" component={Cate}></Route>
                    <Route path="/index/shop" component={Shop}></Route>
                    <Route path="/index/mine" component={Mine}></Route>
                    <Redirect to="/index/home"></Redirect>
                </Switch>
                {/* 底部导航 */}
                <footer className="footer">
                    <NavLink activeClassName="select" to="/index/home">
                        <img src={pathname == "/index/home" ? a2 : a1} alt="" />
                    </NavLink>

                    <NavLink activeClassName="select" to="/index/cate">
                        <img
                            src={pathname == "/index/cate" ? b2 : b1}
                            alt=""
                        />
                    </NavLink>

                    <NavLink activeClassName="select" to="/index/shop">
                        <img
                            src={pathname == "/index/shop" ? c2 : c1}
                            alt=""
                        />
                    </NavLink>
                    <NavLink activeClassName="select" to="/index/mine">
                        <img
                            src={pathname == "/index/mine" ? d2 : d1}
                            alt=""
                        />
                    </NavLink>
                </footer>
            </div>
        )
    }
}
